<template>
  <div id="app">
    <div class="user">
      <img :src="user.url" alt="" />
      <div class="ringhtIns">
        <p>昵称：{{ user.username }}</p>
        <p>ID：{{ user.id }}</p>
      </div>
      <van-icon
        name="setting-o"
        size="0.5rem"
        style="margin-top: 0.3rem"
        @click="onSet"
      />
    </div>
    <div class="order-manage">
      <van-cell title="个人中心" is-link />
      <van-grid class="order-icon">
        <van-grid-item icon="shopping-cart-o" text="购物车" />
        <van-grid-item icon="star-o" text="收藏" />
        <van-grid-item icon="shop-collect-o" text="订阅店铺" />
        <van-grid-item icon="balance-o" text="零钱" />
      </van-grid>
    </div>
    <div class="order">
      <van-cell title="我的订单" is-link />
      <van-grid class="my-order-icon">
        <van-grid-item icon="credit-pay" text="待付款" />
        <van-grid-item icon="paid" text="已支付" />
        <van-grid-item icon="logistics" text="待收货" />
        <van-grid-item icon="refund-o" text="退款/售后" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      user: {
        url: "https://ts1.cn.mm.bing.net/th/id/R-C.65a7cf49062527574b46dc6ba3edbb6a?rik=B6%2f9blOWJLCK1A&riu=http%3a%2f%2fpic43.photophoto.cn%2f20170506%2f0470102348231008_b.jpg&ehk=E2MSZL%2bfE%2bsf2JxuC8F4OaYE%2b6icJ8k6bKgwWQnPRV4%3d&risl=&pid=ImgRaw&r=0",
        username: "请登录",
        id: "0000",
      },
    };
  },
  methods: {
    onSet() {
      this.$router.push({ path: "/usermsg" });
    },
  },
  created() {
    let newUser = this.$store.getters.user;
    if (newUser) {
      this.user = newUser;
    }
  },
  // computed: {
  //   ...mapGetters(["user"]),
  // },
};
</script>

<style  scoped>
#app {
  border-top: 0.01rem solid transparent;
  height: 100vh;
  width: 100%;
  background-color: rgba(234, 131, 96, 0.1);
}
#app .user {
  margin: 0.1rem 0.1rem 0.03rem 0.1rem;
  display: flex;
  padding: 0 0.1rem;
  border: 0.01rem solid transparent;
  border-radius: 0.05rem;
  background-color: #fff;
  height: 2rem;
  align-items: center;
  justify-content: space-around;
}

#app .user img {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  margin-right: 0.2rem;
}
#app .user .ringhtIns {
  margin-right: 1rem;
}
#app .order-manage {
  margin: 0.1rem 0.1rem 0.03rem 0.1rem;
  border: 0.01rem solid transparent;
  border-radius: 0.05rem;
  background-color: #fff;
}
#app .order-manage .order-icon {
  height: 2rem;
}
#app .order {
  margin: 0.1rem 0.1rem 0.03rem 0.1rem;
  border: 0.01rem solid transparent;
  border-radius: 0.05rem;
  background-color: #fff;
}
#app .order .my-order-icon {
  height: 2rem;
}
</style>